<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/sm.min.css" />
</head>
<body>
    <div class="page-group">
        <div id="page-infinite-scroll-bottom" class="page page-current">
          <header class="bar bar-nav">
              <h1 class="title">底部无限滚动</h1>
          </header>
          <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
          <div class="content infinite-scroll infinite-scroll-bottom" data-distance="50">
              <div class="list-block">
                <ul class="list-container">
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                    <li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>
                </ul>
              </div>
              <!-- 加载提示符 -->
              <div class="infinite-scroll-preloader">
                  <div class="preloader"></div>
              </div>
          </div>        
        </div>
    </div>
    <script src="../js/zepto.js" type="text/javascript"></script>
    <script src="../js/config.js" type="text/javascript"></script>
    <script src="../js/sm.min.js" type="text/javascript"></script>
    <script src="../js/sm-extend.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
</body>
</html>